<template>
	<view>
		<view class="content" style="background-color: #C0C0C0;">
			<text>{{movieInfo.original_title}}</text>
		</view>
		<view class="content">
			<image :src="getImages(movieInfo.images.large)" mode="" class="movieImage"></image>
		</view>
		<view class="content" style="background-color: #007AFF">
			<text>主演</text>
		</view>
		<view>
			<scroll-view scroll-x="true"  scroll-left="0" style="width: 100%; white-space: nowrap;">
				<view v-for="(cast,index) in movieInfo.casts" :key="index" class="protagonist">
					<view>
						<image :src="getImages(cast.avatars.small)" mode="" class="castImage"></image>
					</view>
					<view style="background-color: #4CD964;text-align: center;" >
						<text>{{cast.name}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view>
			<view style="background-color: #F0AD4E;">
				<text>剧情介绍:\n</text>
				<text>{{movieInfo.summary}}</text>
			</view>
		</view>
		<view>
			 <button type="warn" @click="buyTicket(movieInfo.id)">立即购票</button>
		</view>
			<uni-popup ref="popup" type="center" :mask-click="false">
				<view style="width: 500upx;height: 300upx;background-color: #FFFFFF;border-radius: 20upx;">
					<view style="text-align: center;">
						<text>
							该操作需要登录才能继续
						</text>
					</view>
					<view style="display: flex;flex-direction: row;margin-top: 30%;">
						<button type="default" style="width: 50%;" @click="loginPopupBtn(false)">取消</button>
						<button type="default" style="width: 50%;" @click="loginPopupBtn(true)">确认</button>
					</view>
				</view>
			</uni-popup>
		<view>
			<view style="background-color: #999999;">
				<text>热门评论:</text>
			</view>
			<view v-if="movieComment.length==0">
				<view style="background-color: #C8C7CC;text-align: center;"><text>暂无评论</text></view>
			</view>
			<view v-else-if="movieComment.length>0">
				<view v-for="(comment,index) in movieComment" :key="index">
					<uni-card :title="'用户:'+comment.telphone" :is-shadow="true">
					    <view><uni-rate :value="comment.movie_grade"></uni-rate></view>
					    <view><text>{{comment.comment_content}}</text></view>
					</uni-card>
				</view>
				<view class="content">
					<uni-pagination title="评论内容" show-icon="true" :total="maxPage" current="1" @change="pagingBtn" pageSize="5"></uni-pagination>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
	import uniCard from '@/components/uni-card/uni-card.vue'
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		data() {
			return {
				movieInfo:"",
				movieComment:[],
				pagingStart:1,
				doubanId:"",
				maxPage:"",
				generalUser:""
			}
		},
		components:{
			uniRate,uniPagination,uniCard,uniPopup
		},
		methods: {
			getImages(_url){
			    if( _url !== undefined ){
			        let _u = _url.substring( 7 );
			        return 'https://images.weserv.nl/?url=' + _u;
			    }
			},
			pagingBtn(e){
				//console.log(e)
				uni.request({
				    url: '/api/tato/movieCommentPagingQuery', 
					data:{
						"currentPage":e.current,
						"doubanId":this.doubanId
					},
				    success: (res) => {
						this.movieComment=res.data
				    }
				});
			},
			buyTicket(doubanId){
				//查看用户是否登录
				uni.getStorage({
					key:"generalUser",
					success:(res)=>{
						//说明登录过了直接进入选着电影院的界面
					},
					fail:(res)=>{
						//说明没有登录过
						this.$refs.popup.open()
					}
				})
			},
			loginPopupBtn(e){
				if(e){
					 this.$refs.popup.close()
					//调到登录页面
					uni.navigateTo({
						url:"../login_page/login_page?doubanId="+this.doubanId
					})
				}else{
					//关闭弹窗
					 this.$refs.popup.close()
				}
			}
		},
		onLoad(option){
			console.log(option.doubanId)
			this.doubanId=option.doubanId
			uni.request({
			    url: '/api/tato/movieDetailByDoubanId', 
			    data: {
			        doubanId:this.doubanId,
					pagingStart:this.pagingStart
			    },
			    success: (res) => {
					//console.log(res.data)
					this.movieInfo = JSON.parse(res.data[res.data.length-1].movieInfo)
					this.maxPage = res.data[res.data.length-1].maxPage
					if(res.data.length>1){
						for(let i = 0 ;i<res.data.length-1;i++){
							this.movieComment.push(res.data[i])
						}
					}
			    }
			});
		}
	}
</script>

<style>
.content{
	display: flex;
	justify-content: center;
}
.movieImage{
	width: 100%;
	height: 500upx;
}
.protagonist{
	display:inline-block;
}
.castImage{
	width: 300upx;
	height: 300upx;
}
</style>
